<template>
	<view class="edit">
		<view class="list">
			<view>
				<text>个人头像</text>
				<image v-if="userinfo.avatar" @click="C_chooseAvatar" class="avatar" :src="userinfo.avatar" mode="aspectFill"></image>
				<view v-else @click="C_chooseAvatar">
					<open-data type="userAvatarUrl" class="avatar" ></open-data>
				</view>
			</view>
			<view class="Required">
				<text>姓名</text>
				<input type="text" v-model="userinfo.name" placeholder="请输入姓名" />
			</view>
			<view class="sex">
				<text>性别</text>
				<view v-if="vuex_httpImageUrl">
					<view @click="userinfo.gender = 1">
						<image v-if="!userinfo.gender" :src="vuex_httpImageUrl+'static/common/sexcheck.png'" mode="widthFix"></image>
						<image v-if="userinfo.gender == 2 || userinfo.gender ==  '女'" :src="vuex_httpImageUrl+'static/common/sexcheck.png'" mode="widthFix"></image>
						<image v-if="userinfo.gender == 1 || userinfo.gender ==  '男'" :src="vuex_httpImageUrl+'static/common/sexcheck1.png'" mode="widthFix"></image>
						<text>男</text>
					</view>
					<view @click="userinfo.gender = 2">
						<image v-if="!userinfo.gender" :src="vuex_httpImageUrl+'static/common/sexcheck.png'" mode="widthFix"></image>
						<image v-if="userinfo.gender == 1 || userinfo.gender ==  '男'" :src="vuex_httpImageUrl+'static/common/sexcheck.png'" mode="widthFix"></image>
						<image v-if="userinfo.gender == 2 || userinfo.gender ==  '女'" :src="vuex_httpImageUrl+'static/common/sexcheck1.png'" mode="widthFix"></image>
						<text>女</text>
					</view>
				</view>
			</view>
			<view>
				<text>出生日期</text>
				<text @click="visible = true">{{userinfo.birthday || '请选择出生日期'}}</text>
			</view>
			<view>
				<text>手机号码</text>
				<text @click="C_editMobile">{{userinfo.mobile || '修改手机号'}}</text>
			</view>
			
			<!--  -->
			<view>
				<text>身份证号码</text>
				<input type="text" v-model="userinfo.idcard" placeholder="修改身份证号码" />
			</view>
			<view>
				<text>住址</text>
				<input type="text" v-model="userinfo.address" placeholder="修改住址" />
			</view>
			<view>
				<text>备用联系人</text>
				<input type="text" v-model="userinfo.stbyc" placeholder="修改备用联系人" />
			</view>
			<view>
				<text>备用联系人关系</text>
				<input type="text" v-model="userinfo.stbycr" placeholder="修改备用联系人关系" />
			</view>
			<view>
				<text>备用联系人电话</text>
				<input type="text" v-model="userinfo.stbycp" placeholder="修改备用联系人电话" />
			</view>
			<view>
				<text>身高</text>
				<input type="text" v-model="userinfo.height" placeholder="修改身高" />
			</view>
			<view>
				<text>体重</text>
				<input type="text" v-model="userinfo.weight" placeholder="修改体重" />
			</view>
			<view>
				<text>腰围</text>
				<input type="text" v-model="userinfo.waistline" placeholder="修改腰围" />
			</view>
			<view>
				<text>臀围</text>
				<input type="text" v-model="userinfo.hipline" placeholder="修改臀围" />
			</view>
			<view>
				<text>腰臀比</text>
				<input type="text" v-model="userinfo.whr" placeholder="修改腰臀比" />
			</view>
			<view>
				<text>视力</text>
				<input type="text" v-model="userinfo.vision" placeholder="修改视力" />
			</view>
			<view>
				<text>文化程度</text>
				<input type="text" v-model="userinfo.culture" placeholder="修改文化程度" />
			</view>
		</view>
		<view class="submit" @click="C_submit">确定</view>
		
		<w-picker
			:visible.sync="visible"
			mode="date" 
			startYear="1900" 
			endYear="2030"
			:value="userinfo.birthday"
			fields="day"
			@confirm="C_chooseDate"
			@cancel="visible = false"
			ref="date" 
		></w-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sexActive:0,
				visible:false,
				// dateVal:'请选择日期',
				
				userinfo:{},
				// jintian:''
			};
		},
		onLoad() {
			this.def_getuserinfo()
			// console.log('onshow');
			// let curDate=new Date();
			// let curYear=curDate.getFullYear();
			// let curMonth=curDate.getMonth()+1;
			
			// if (curMonth  < 10){
			// 	curMonth = '0' + curMonth
			// }
			// let curDay=curDate.getDate();
			// if (curDay < 10){
			// 	curDay = '0' + curDay
			// }
			// let fin = '' + curYear + '-' + curMonth +'-' + curDay
			// this.jintian = fin
			// this.jintian = this.userinfo.birthday
			// console.log(this.userinfo.birthday,'shengri');
			
			
		},
		methods:{
			async def_getuserinfo(){
				let userinfo = await this.$u.api.myinfo()
				console.log(userinfo.data);
				this.userinfo = userinfo.data
			},
			C_chooseDate(e){
				this.userinfo.birthday = e.value
			},
			async C_submit(){
				let { avatar,name,gender,birthday,mobile } = this.userinfo;
				if(!name){this.$u.toast('姓名为必填项');return}
				// let params = { avatar,name,gender,birthday,mobile }
				// let res = await this.$u.api.appuserchangeuserinfo(params);
				let res = await this.$u.api.appuserchangeuserinfo(this.userinfo);
				this.$u.toast(res.msg)
				res.code == 0 ?setTimeout(_=>{uni.navigateBack()},700) :''
			},
			C_chooseAvatar(){
				uni.chooseImage({
					count:1,
					success:res=>{
						this.$u.utils.uploadFile(res.tempFilePaths[0]).then(res=>{
							let thumb_image = JSON.parse(res).data.thumb_image
							this.$u.vuex('vuex_myinfo.avatar',thumb_image)
							this.userinfo.avatar = thumb_image
						})
					}
				})
			},
			C_editMobile(){
				uni.navigateTo({
					url:'./editMobile/editMobile'
				})
			}
		}
	}
</script>

<style lang="scss">
	.Required{
		position: relative;
		&::before{
			position: absolute;
			top: 40rpx;
			left: -15rpx;
			content: '*';
			display: block;
			color: red;
		}
	}
	.edit{
		.list{
			background-color: #FFFFFF;
			width: 95%;
			margin: 20rpx auto;
			padding: 0 50rpx;
			border-radius: 20rpx;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;
				border-bottom: 1px solid rgba(0,0,0,.05);
				padding-right: 20rpx;
				position: relative;
				&.sex{
					>view{
						display: flex;
						>view{
							margin-left: 70rpx;
						}
						image{
							width: 30rpx;
							height: 30rpx;
							position: relative;
							margin-right: 10rpx;
							top: 7rpx;
						}
					}
				}
				&:nth-child(1){
					padding-right: 20rpx!important;
					padding: 20rpx 0;
				}
				&:nth-child(3){
					padding-right: 0rpx!important;
					&::after{
						display: none;
					}
				}
				&::after{
					content: '';
					display: block;
					position: absolute;
					top: 0;
					width: 15rpx;
					height: 15rpx;
					transform: rotate(45deg);
					top: calc(50% - 7.5rpx);
					right: 0;
					border-top: 1px solid #9B9B9B;
					border-right: 1px solid #9B9B9B;
					
				}
				input{
					text-align: right;
				}
				.avatar{
					display: inline-block;
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
		}
		.submit{
			padding: 20rpx;
			text-align: center;
			width: 80%;
		}
	}
</style>
